<template>
  <div>
    <div class="search">
      <select v-model="value">
        <option value="" disabled selected style="display: none">
          请选择查找依据
        </option>
        <option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></option>
      </select>
      <el-input
        v-model="search"
        placeholder="请输入搜索内容"
        style="width: 20%"
      ></el-input>
      <el-button type="primary" @click="searchby">查找</el-button>
      <el-button type="primary" @click="backAll">返回总列表</el-button>
    </div>
    <el-table :data="tableData" stripe style="width: 99.9%" height="480">
      <el-table-column prop="uid" label="ID" sortable> </el-table-column>
      <el-table-column prop="account" label="账号"> </el-table-column>
      <el-table-column prop="username" label="用户名"> </el-table-column>
      <el-table-column prop="password" label="密码"> </el-table-column>
      <el-table-column prop="dept" label="部门"> </el-table-column>
      <el-table-column prop="role" label="身份"> </el-table-column>
      <el-table-column prop="status" label="用户状态"> </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            type="primary"
            size="mini"
            @click="edit(scope.row)"
            style="padding: 7px 12px"
            >编辑</el-button
          >
          <el-button
            slot="reference"
            type="danger"
            size="mini"
            style="padding: 7px 12px"
            @click="delect(scope.row.uid)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="输入您要修改的信息"
      :visible.sync="dialogVisible"
      width="40%"
    >
      <el-form label-width="120px" :model="form">
        <el-form-item label="ID">
          <el-input v-model="form.uid" disabled></el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="form.account"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="form.dept"></el-input>
        </el-form-item>
        <el-form-item label="身份">
          <el-radio v-model="form.role" label="1">管理员</el-radio>
          <el-radio v-model="form.role" label="2">普通用户</el-radio>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
axios.defaults.baseURL = "http://localhost:8888";
export default {
  name: "Usertable",
  data() {
    return {
      search: "",
      dialogVisible: false,
      tableData: [
        {
          uid: 1,
          account: 111,
          username: "and",
          password: "123",
        },
      ],
      form: {},
      options: [
        {
          value: "1",
          label: "ID",
        },
        {
          value: "2",
          label: "账号",
        },
        {
          value: "3",
          label: "用户名",
        },
        {
          value: "4",
          label: "部门",
        },
        {
          value: "5",
          label: "身份",
        },
      ],
      value: "",
    };
  },
  created() {
    this.load();
  },
  methods: {
    // 渲染所有的用户信息
    load() {
      axios.get(`/user/selectAllUser`).then((respose) => {
        this.tableData = respose.data.data;
        console.log(this.tableData);
      });
    },
    // 按条件查询
    searchby() {
      //按id查询
      if (this.value == 1) {
        this.form.uid = this.search;
        this.sendrequest();
      } else if (this.value == 2) {
        this.form.account = this.search;
        this.sendrequest();
      } else if (this.value == 3) {
        this.form.username = this.search;
        this.sendrequest();
      } else if (this.value == 4) {
        this.form.dept = this.search;
        this.sendrequest();
      } else if (this.value == 5) {
        this.form.role = this.search;
        this.sendrequest();
      }
    },
    // 发送请求函数
    sendrequest() {
      axios.post(`/user/selectUserByArg`, this.form).then((respose) => {
        this.tableData = respose.data.data;
        this.form = {};
      });
    },
    // 编辑函数
    edit(row) {
      console.log("被点击了");
      this.form = JSON.parse(JSON.stringify(row));
      this.dialogVisible = true;
    },
    // 确认修改
    confirmEdit() {
      axios.put(`/user/updateUser`, this.form).then((response) => {
        if (response.data.status === 200) {
          this.$message({
            type: "success",
            message: "修改成功",
          });
        } else {
          this.$message({
            type: "error",
            message: response.data.message,
          });
        }
        this.form = {};
        this.load();
        this.dialogVisible = false;
      });
    },
    // 删除函数
    delect(id) {
      const msg = "您确认要删除吗";
      if (confirm(msg) == true) {
        confirm;
        axios.post(`/user/deleteUserById/${id}`).then((response) => {
          console.log("删除返回", response);
          this.load();
        });
      }
    },
    // 返回总列表
    backAll() {
      this.load();
    },
  },
};
</script>

<style scoped>
.search {
  padding: 10px;
  /* width: 230px; */
}
select {
  width: 150px;
  height: 40px;
  padding: 0 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  color: #606266;
  line-height: 40px;
  font-size: 13px;
}
</style>